import Vue from 'vue'
import App from './App.vue'
import Find from '@/view/Find'
import My from '@/view/My'
import Part from '@/view/Part'
import NotFound from '@/view/NotFound'
import Ranking from '@/view/second/Ranking'
import Recommend from '@/view/second/Recommend'
import SongList from '@/view/second/SongList'
Vue.config.productionTip = false

// 1.下载vue-router
// 2.引入vue-router
import VueRouter from 'vue-router'
// 3.注册全局组件
Vue.use(VueRouter)
    // 4.规则数组
const routes = [{
        path: '/', // 默认hash值路径
        redirect: '/find' // 重定向到/find
            // 浏览器url中#后的路径被改变成/find - 重新匹配规则
    }, {
        path: "/find",
        name: 'Find',
        component: Find,
        children: [{
                path: "ranking",
                component: Ranking
            },
            {
                path: "recommend",
                component: Recommend
            },
            {
                path: 'songlist',
                component: SongList
            }
        ]
    }, {
        path: "/my",
        name: 'My',
        component: My
    }, {
        path: "/part",
        name: 'Part',
        component: Part
    }, {
        path: "/part/:username",
        component: Part
    }, {
        path: '*',
        component: NotFound
    }]
    // 5.生成路由对象
const router = new VueRouter({
    routes, // routes是固定key（传入规则数组）
    // mode: "history"
})

// 路由守卫 - 对路由权限进行判断
// 语法：router.beforeEach((to, from, next) => { //路由跳转之前先执行这里，决定是否跳转 })
// 参数1：要跳转到的路由
// 参数2：从哪里跳转来的路由
// 参数3：函数体 - next()才会让路由正常的跳转切换，next(false)在原地停留，next('强制修改到另一个路由路径上')
// 注意：如果不调用next()页面留在原地
const isLogin = true
router.beforeEach((to, from, next) => {
    if (to.path === "/my" && isLogin === false) {
        alert('请登录')
        next(false)
    } else {
        next()
    }
})

// 6.路由对象注入到vue实例中，this可以访问$route和$router
new Vue({
    router,
    render: h => h(App),
}).$mount('#app')